WD PLUS 2020-11 (dashboard)

Zanim przejdziemy do budowania task runnera, wykonaj krótkie ćwiczenie, aby oswoić się z komendami różnych pakietów i ich dokumentacją. Przyda Ci się to już w kolejnym module, aby lepiej zrozumieć, co dzieje się w naszym task runnerze.

W tym zadaniu cały czas pracujemy na repozytorium z poprzednich ćwiczeń (tym, gdzie masz projekt z piosenką/wierszem). Upewnij się, że masz w nim zainicjalizowanego Gita (poznasz to po obecności katalogu .git), dodany plik .gitignore, zainicjalizowanego NPM-a (czyli czy w katalogu projektu jest plik package.json) i zainstalowany pakiet BrowserSync (powinien być obecny w pliku package.json, w sekcji devDependencies). Jeżeli brakuje któregoś z tych elementów, cofnij się do poprzednich submodułów i dodaj je.

Następnie, już samodzielnie, zainstaluj w tym projekcie następujące pakiety z flagą --save-dev:

• autoprefixer-cli - konwertuje plik CSS, dodając prefiksy wymagane przez niektóre przeglądarki np. dla właściwości display: flex,
• html-validate - sprawdza poprawność kodu HTML.

Komendy instalacji tych pakietów znajdziesz w ich dokumentacji (kliknij ich nazwy na liście powyżej). Pamiętaj, że dokumentacja to cenne źródło wiedzy — przyzwyczajaj się do korzystania z niej jak najczęściej!

Na końcu dodaj w projekcie plik komendy.txt i umieść w nim przykłady komend uruchamiających powyższe dwa narzędzia, gdzie:

• autoprefixer-cli ma czytać z pliku style.css i zapisywać wynik do pliku style.prefixed.css (możesz przetestować działanie Autoprefixera np. wpisując w pliku style.css regułę z display: flex),
• html-validate ma wyświetlać listę błędów we wszystkich plikach .html.

Jeżeli nie masz pewności, jak to zrobić, odwołaj się do dokumentacji.

Po wykonaniu zadania zaktualizuj repozytorium zdalne, wklej poniżej link do niego i wyślij do Mentora.